<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style>
			* {
				margin:0;
				padding:0;
				list-style:none;
			}
			.tab {
				margin: 100px auto;
				width: 520px;
				height: 200px;
			}
			.tab_list {
				overflow: hidden;
			}
			.tab_list li {
				float: left;
				width: 100px;
				height: 30px;
				border:2px solid #ccc;
				background-color: rgb(237,236,218);
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			.tab_list .current {
				background-color: rgb(150,224,217);
			}
			.tab_con .item {
				width: 100%;
				height: 170px;
				display: none;
				font-size: 16px;
				background-color: rgb(242,242,242);
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<ul class="tab_list">
				<li>新闻</li>
				<li>娱乐</li>
				<li>军事</li>
				<li>科技</li>
				<li>美食</li>
			</ul>
			<div class="tab_con">
				<div class="item" style="display: block;">电子人民币发行</div>
				<div class="item">冰糖炖雪梨</div>
				<div class="item">东部战区三连警告</div>
				<div class="item">5G手机资费</div>
				<div class="item">蟹黄灌汤包</div>
			</div>
		</div>
		<script>
			$(function() {
				$(".tab_list li").click(function() {
					//链式编程，点击当前li添加current  其余兄弟移除 current
					$(this).addClass("current").siblings().removeClass("current");
					//得到当前li的索引号
					var index = $(this).index();
					//让下面相同索引号的item 显示，其余item隐藏
					$(".tab_con .item").eq(index).show().siblings().hide();
				});
			});
		</script>
	</body>
</html>
